<template>
    <div>
        <div class="real-name">
            <div class="real-name-head">实名认证</div>
            <div class="real-name-content">
                <div class="real-name-content-show" style="display: block">
                    <div class="certification-process">
                        <p>认证流程</p>
                        <img src="../assets/1.png"/>填写基础信息
                        <img src="../assets/2.png"/>等待信息审核
                        <img src="../assets/3.png"/>完成实名认证
                    </div>
                    <br>
                    <div class="real-name-information">
                        <a-form
                                :layout="formState.layout"
                                :model="formState"
                                v-bind="formItemLayout">
                            <a-form-item label="真实姓名">
                                <label class="el-form-item_label" for="realName"></label>
                                <a-input v-model:value="formState.fieldA" placeholder="请输入您的真实姓名" />
                            </a-form-item>
                            <a-form-item label="身份证号">
                                <label class="el-form-item_label" for="idCard"></label>
                                <a-input v-model:value="formState.fieldB" placeholder="请输入您的身份证号码" />
                            </a-form-item>
                            <a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
                                <a-button type="primary">提交</a-button>
                            </a-form-item>
                        </a-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
    import {computed, defineComponent,reactive, UnwrapRef} from 'vue';

    interface FormState {
        layout: 'horizontal' | 'vertical' | 'inline';
        fieldA: string;
        fieldB: string;
    }

    export default defineComponent({
        components: {
            LeftCircleOutlined,
            RightCircleOutlined,
        },
        setup() {
            const formState: UnwrapRef<FormState> = reactive({
                layout: 'horizontal',
                //文本框内容
                fieldA: '',
                fieldB: '',
            });
            const formItemLayout = computed(() => {
                const { layout } = formState;
                return layout === 'horizontal'
                    ? {
                        labelCol: { span: 4 },
                        wrapperCol: { span: 14 },
                    }
                    : {};
            });
            const buttonItemLayout = computed(() => {
                const { layout } = formState;
                return layout === 'horizontal'
                    ? {
                        wrapperCol: { span: 14, offset: 4 },
                    }
                    : {};
            });
            const inputProcess = () => {
                console.log("提交认证")
            };

            return {
                inputProcess,
                formState,
                formItemLayout,
                buttonItemLayout,
            }
        },
    });
</script>

<style scoped>
    /deep/ .ant-col {
        width: 500px;
    }
    .real-name {
        width: 100%;
        background: #fff;
        margin-bottom: 10px;
    }

    .real-name .real-name-head {
        height: 48px;
        line-height: 48px;
        font-size: 18px;
        font-weight: 600;
        color: #2e2e2e;
        padding-left: 16px;
        border-bottom: 1px solid #f0f0f2;
    }

    .real-name .real-name-content {
        padding: 16px;
    }

    .real-name .real-name-content .real-name-content-show {
        cursor: pointer;
        padding: 16px 112px 16px 0;
        position: relative;
    }

    ul {
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        margin: 0;
        padding: 0;
        font-family: PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif !important;
    }

    .real-name .real-name-content .real-name-content-show ul li .content-show-l {
        width: 56px;
        color: #555666;
        margin-right: 40px;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-left: 16px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .real-name .real-name-content .real-name-content-show ul li .content-show-r {
        color: #222226;
        word-break: break-all;
    }

    .real-name .real-name-content .real-name-content-show ul li {
        line-height: 24px;
        font-size: 14px;
        margin-bottom: 32px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    li {
        list-style: none;
    }

    span {
        border: 0;
        margin: 0;
        padding: 0;
    }

    .real-name .real-name-content .real-name-content-show ul li .content-show-r img {
        width: 24px;
        height: 24px;
        display: block;
    }

    .real-name .real-name-content .real-name-content-show:hover {
        background: #f8f8f8;
    }

    .real-name .real-name-content .real-name-content-edit {
        padding: 24px 40px;
        background: #f8f8f8;
    }

    .real-name .real-name-content .real-name-content-edit .real-name-edit-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .real-name .real-name-content .real-name-content-edit .real-name-edit-form .el-form-item {
        width: 380px;
        margin-right: 0;
        margin-bottom: 24px;
    }

    .real-name .real-name-content .real-name-content-edit .real-name-edit-form .el-form-item .el-form-item_label {
        line-height: 16px;
        padding-bottom: 8px;
    }

    .el-form--inline.el-form--label-top .el-form-item_content {
        display: block;
    }

    .el-form-item_content {
        line-height: 40px;
        position: relative;
        font-size: 14px;
    }

    .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
    }

    .el-input.is-disabled .el-input_inner {
        background-color: #f5f7fa;
        border-color: #e4e7ed;
        color: #c0c4cc;
        cursor: not-allowed;
    }

    .el-input_inner {
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        border-top-color: rgb(220, 223, 230);
        border-right-color: rgb(220, 223, 230);
        border-bottom-color: rgb(220, 223, 230);
        border-left-color: rgb(220, 223, 230);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
    }

    .real-name .real-name-content .real-name-content-show .edit-icon {
        /*display: none;*/
        position: absolute;
        top: 16px;
        right: 16px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #1989fa;
        font-size: 14px;
    }

    .real-name-information{

    }
</style>